import ProCard from '@ant-design/pro-card';
import { Carousel } from 'antd';
import { createRef, useState } from 'react';

const Dots = ({ onClick, count, current }) => {
  return (
    <div
      style={{
        position: 'absolute',
        bottom: '5%',
        left: '6%',
        borderRadius: '5px',
        zIndex: '10',
        cursor: 'pointer',
      }}
    >
      {Array(count)
        .fill(0)
        .map((_, index) => (
          <div
            key={index}
            onClick={() => onClick(index)}
            style={{
              backgroundColor: current === index ? '#722ED1' : 'white',
              cursor: 'pointer',
              width: '7em',
              height: '.5em',
              display: 'inline-block',
              marginLeft: '1em',
            }}
          ></div>
        ))}
    </div>
  );
};

const MainHeader = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const handleSlideChange = (_currentSlide, nextSlide) => {
    setCurrentSlide(nextSlide);
  };
  const ref = createRef();
  const onClick = (slide) => {
    console.log(slide);
    ref.current?.goTo(slide, false);
    setCurrentSlide(slide);
  };
  return (
    <ProCard bodyStyle={{ padding: 0 }} ghost style={{ position: 'relative', marginTop: '-2.5em' }}>
      <Carousel
        autoplay
        autoplaySpeed={2500}
        ref={ref}
        dots={false}
        beforeChange={handleSlideChange}
      >
        <img src="banner1.svg" style={{ position: 'relative' }}></img>
        <img src="banner2.svg" style={{ position: 'relative' }}></img>
      </Carousel>
      <Dots onClick={onClick} current={currentSlide} count={2}></Dots>
    </ProCard>
  );
};

export default MainHeader;
